{% extends "base.html" %}
{% block title %}Cloudera集群状态{% endblock %}
{% block headpre %}
    <link rel="stylesheet" href="static/plugins/select2/select2.min.css">
{% endblock %}
{% block head %}
    <script src="static/plugins/select2/select2.min.js"></script>
    <script src="static/js/jquery.ba-resize.js"></script>
    <script src="static/plugins/echarts.min.js"></script>
    <script src="static/plugins/walden.js"></script>
{% endblock %}
{% block contentheader %}集群状态{% endblock %}
{% block contentsmallheader %}集群CPU,网络,IO等状态参数{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="box box-info">
                <div class="box-body">
                    <div class="col-md-3">
                        时间范围：
                        <select class="form-control select2" style="width: 40%;" id="change_timezone">
                            <option value="30">30分钟</option>
                            <option value="60">1小时</option>
                            <option value="120">2小时</option>
                            <option value="360">6小时</option>
                            <option value="720">12小时</option>
                            <option value="1440">1天</option>
                            <option value="10080">7天</option>
                            <option value="43200">30天</option>
                        </select>

                    </div>
                    <div class="col-md-3">
                        页面布局：
                        <select class="form-control select2" style="width: 40%;" id="change_rowsize">
                            <option value="1">1</option>
                            <option value="2" selected="selected">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="6">6</option>
                        </select>
                        （图标个数/行）
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="row">
        <div class="col-md-6">
            <div class="box box-primary" id="chart1">
                <div class="box-header with-border">
                    <h3 class="box-title">集群CPU</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div style="height:270px;width: 100%">
                        <div id="cpu" style="height:100%">
                        </div>
                    </div>
                </div>
            </div>
            <div class="box box-primary" id="chart2">
                <div class="box-header with-border">
                    <h3 class="box-title">集群磁盘IO</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div style="height:270px;width: 100%">
                        <div id="diskio" style="height:100%">
                        </div>
                    </div>
                </div>
            </div>
            <div class="box box-primary" id="chart5">
                <div class="box-header with-border">
                    <h3 class="box-title">YARN内存情况</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div style="height:270px;width: 100%">
                        <div id="memory" style="height:100%">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="box box-primary" id="chart3">
                <div class="box-header with-border">
                    <h3 class="box-title">集群网络IO</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div style="height:270px;width: 100%">
                        <div id="netio" style="height:100%">
                        </div>
                    </div>
                </div>
            </div>
            <div class="box box-primary" id="chart4">
                <div class="box-header with-border">
                    <h3 class="box-title">HDFS IO</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div style="height:270px;width: 100%">
                        <div id="hdfsio" style="height:100%">
                        </div>
                    </div>
                </div>
            </div>
            <div class="box box-primary" id="chart6">
                <div class="box-header with-border">
                    <h3 class="box-title">HDFS容量状态</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div style="height:270px;width: 100%">
                        <div id="dfscapacity" style="height:100%">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        function add_class() {
            $('#treeview4').addClass('active');
            $('#menu4').addClass('menu-open');
            $('#monitorcloudera').addClass('active');
        }
        $(".select2").select2({});
        function bytes_to_other(value) {
            if (value < 1024)
                return value.toFixed(2) + ' B';
            else if (1024 <= value && value < 1024 * 1024) {
                return (value / 1024.0).toFixed(2) + ' KB';
            }
            else if (1024 * 1024 <= value && value < 1024 * 1024 * 1024) {
                return (value / 1024.0 / 1024).toFixed(2) + ' MB';
            }
            else if (1024 * 1024 * 1024 <= value)
                return (value / 1024.0 / 1024 / 1024).toFixed(2) + ' GB';
            else if (1024 * 1024 * 1024 * 1024 <= value)
                return (value / 1024.0 / 1024 / 1024 / 1024).toFixed(2) + ' TB';
        }
        var time_zone = 30;
        var row_size = 2;


        function changeToolTip(params) {
            var tip = '<b>' + params[0]['name'] + '</b>' + '<br/>';
            for (var item in params) {
                tip = tip + params[item]['seriesName'] + ':' + bytes_to_other(params[item]['data'] * 1024 * 1024) + '<br/>'
            }
            return tip;
        }
        function changeToolTip_mem(params) {
            var tip = '<b>' + params[0]['name'] + '</b>' + '<br/>';
            for (var item in params) {
                tip = tip + params[item]['seriesName'] + ':' + params[item]['data'].toFixed(2) + 'GB<br/>'
            }
            return tip;
        }
        function changeToolTip_dfs(params) {
            var tip = '<b>' + params[0]['name'] + '</b>' + '<br/>';
            for (var item in params) {
                tip = tip + params[item]['seriesName'] + ':' + params[item]['data'].toFixed(2) + 'TB<br/>'
            }
            return tip;
        }
        function getChartData() {
            $.ajax({
                data: {time_zone: time_zone},
                url: '/get_monitor_cloudera_data', success: function (result) {
                    var cpu = echarts.init(document.getElementById('cpu'));
                    var diskio = echarts.init(document.getElementById('diskio'));
                    var netio = echarts.init(document.getElementById('netio'));
                    var hdfsio = echarts.init(document.getElementById('hdfsio'));
                    var memory = echarts.init(document.getElementById('memory'));
                    var hdfscapacity = echarts.init(document.getElementById('dfscapacity'));
                    var cpu_option = result.cpu_option;
                    cpu.setOption(cpu_option);
                    $('#cpu').parent().resize(function () {
                        cpu.resize();
                    });
                    var diskio_option = result.diskio_option;
                    diskio_option['tooltip']['formatter'] = function (params, ticket, callback) {
                        return changeToolTip(params);
                    };
                    diskio.setOption(diskio_option);
                    $('#diskio').parent().resize(function () {
                        diskio.resize();
                    });
                    var netio_option = result.netio_option;
                    netio_option['tooltip']['formatter'] = function (params, ticket, callback) {
                        return changeToolTip(params);
                    };
                    netio.setOption(netio_option);
                    $('#netio').parent().resize(function () {
                        netio.resize();
                    });
                    var hdfsio_option = result.hdfsio_option;
                    hdfsio_option['tooltip']['formatter'] = function (params, ticket, callback) {
                        return changeToolTip(params);
                    };
                    hdfsio.setOption(hdfsio_option);
                    $('#hdfsio').parent().resize(function () {
                        hdfsio.resize();
                    });
                    var memory_option = result.memory_option;
                    memory_option['tooltip']['formatter'] = function (params, ticket, callback) {
                        return changeToolTip_mem(params);
                    };
                    memory.setOption(memory_option);
                    $('#hdfsio').parent().resize(function () {
                        memory.resize();
                    });
                    var dfs_option = result.dfs_option;
                    dfs_option['tooltip']['formatter'] = function (params, ticket, callback) {
                        return changeToolTip_dfs(params);
                    };
                    hdfscapacity.setOption(dfs_option);
                    $('#hdfsio').parent().resize(function () {
                        hdfscapacity.resize();
                    });

                }
            });
        }
        getChartData();
        setInterval(function () {
            getChartData();
        }, 60000);
        $('#change_timezone').on("change", function (e) {
            time_zone = $("#change_timezone").find("option:selected").attr('value');
            getChartData();
        });
        $('#change_rowsize').on("change", function (e) {
            var col_class = 'col-md-';
            row_size = parseInt($("#change_rowsize").find("option:selected").attr('value'));
            var charts = $('div[id^="chart"]');
            $('#row').empty();
            console.log(charts.length);
            col_class = col_class + (12 / row_size);
            for (var i = 0; i < row_size; i++) {
                $('#row').append('<div class="' + col_class + '" id="' + (i) + '"></div>');
            }
            for (var i = 0; i < charts.length; i++) {
                $('#' + (i % row_size)).append(charts[i]);
            }
            getChartData();
        });
    </script>
{% endblock %}